// import classnames from 'classnames'
// import dayjs from 'dayjs'
import { Component } from 'react'
// dayjs().format('YYYY-MM-DD HH:mm:ss')
import { random, orderBy } from 'lodash'
import Tabs from './Tabs'
import List from './List'
import Form from './Form'

const avatars = [
  {
    author: '传智教育',
    avatar: 'http://www.itcast.cn/2020gw/images/indeximg/logobot2.jpg',
  },
  {
    author: '黑马程序员',
    avatar: 'http://www.itheima.com/images/logo.png',
  },
  {
    author: '上海前端',
    avatar: 'http://geek.itheima.net/images/user_head.jpg',
  },
]

class App extends Component {
  // 封装格式化函数
  // formatTime = (time, str = 'YYYY-MM-DD HH:mm:ss') => {
  //   return dayjs(time).format(str)
  // }

  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'hot',
    list: [
      {
        id: 2,
        author: '传智教育',
        comment: '好口碑IT培训机构,一样的教育,不一样的品质',
        time: new Date('2021-12-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
        avatar: 'http://www.itcast.cn/2020gw/images/indeximg/logobot2.jpg',
      },
      {
        id: 3,
        author: '黑马程序员',
        comment: '键盘敲烂，月薪过万',
        time: new Date('2019-12-11 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
        avatar: 'http://www.itheima.com/images/logo.png',
      },
      {
        id: 1,
        author: '上海前端',
        comment: '月薪1万5，简简单单',
        time: new Date('2008-12-11 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
        avatar: 'http://geek.itheima.net/images/user_head.jpg',
      },
    ],
    // inputComment: '', // 用户输入的评论内容
  }

  componentDidMount() {
    // 从本地加载数据
    const list = JSON.parse(localStorage.getItem('commentList') || '[]')
    this.setState({
      list,
    })
  }

  componentDidUpdate() {
    // 说明组件更新了 => 意味着组件数据更新了  => 存到本地
    localStorage.setItem('commentList', JSON.stringify(this.state.list))
  }

  // 点击按钮发布评论
  publishComment = (inputComment) => {
    // if (!this.state.inputComment.trim()) {
    //   this.inputRef.current.focus()
    //   return
    // }

    // 本质就是往list中塞一个数据
    // 提前处理数据
    // 得到一个随机数

    // const index = Math.floor(Math.random() * avatars.length)
    // const userObj = avatars[index]

    // 利用函数库
    const index = random(0, avatars.length - 1)
    const userObj = avatars[index]

    const commentItem = {
      id: Date.now(),
      author: userObj.author,
      comment: inputComment,
      time: new Date(),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 1,
      avatar: userObj.avatar,
    }

    const newList = [commentItem, ...this.state.list]

    this.setState({
      list: newList,
      // inputComment: '',
    })
  }

  // 删除评论
  del = (id) => {
    // 本质删除数据中的数据
    const newList = this.state.list.filter((item) => item.id !== id)

    // const newList = [...this.state.list]
    // newList.splice
    this.setState({
      list: newList,
    })
  }

  // 改变态度的(点赞,  取消点赞)
  changeAttitude = (id, attitude) => {
    console.log(id, attitude)
    // 本质就是找到对应项评论 修改状态为attitude => 不要改变原数据

    // 方式一:
    // const newList = [...this.state.list]
    // const temp = newList.find((item) => item.id === id)
    // temp.attitude = attitude

    // this.setState({
    //   list: newList,
    // })

    // 方式二:
    this.setState({
      list: this.state.list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            attitude,
          }
        } else {
          return item
        }
      }),
    })
  }

  // 点击切换tab栏
  changeTab = (type) => {
    // 本质就是对原数据排序 => 不能改变原数据!!!

    // 拷贝好的数组, 排序
    // const newList = [...this.state.list]
    // if (type === 'hot') {
    //   // 临时使用id排序  升序
    //   newList.sort((a, b) => {
    //     return a.id - b.id
    //   })
    // } else {
    //   // 时间排序 升序
    //   newList.sort((a, b) => {
    //     return a.time - b.time
    //   })
    // }
    // this.setState({
    //   active: type,
    //   list: newList,
    // })

    this.setState({
      active: type,
      list: orderBy(this.state.list, type === 'hot' ? 'id' : 'time', ['asc']),
    })
  }
  render() {
    return (
      <div className="App">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-head">
            <span>5 评论</span>
          </div>

          {/* 排序 */}
          {/* :class="{on:true" => 需要插件classnames */}
          <Tabs
            tabs={this.state.tabs}
            active={this.state.active}
            changeTab={this.changeTab}
          ></Tabs>

          {/* 添加评论 */}
          <Form
            inputComment={this.state.inputComment}
            publishComment={this.publishComment}
          ></Form>

          {/* 评论列表 */}
          <List
            list={this.state.list}
            del={this.del}
            changeAttitude={this.changeAttitude}
          ></List>
        </div>
      </div>
    )
  }
}

export default App
